<template>
<<<<<<< HEAD
	<div class="listview" ref="listview">
		<div>
			<ul>
				<li v-for='grounp in data' class="list-group" ref="listGroup">
					<h2 class="list-group-title">{{grounp.title}}</h2>
					<ul>
						<li v-for='item in grounp.items' class="list-group-item" @click="selectItem(item)">
							<img v-lazy='item.imgUrl' alt="" class="avatar">
=======
	<div class="listview" ref="listview" :data='data'>
		<div>
			<ul>
				<li v-for="group in data" class="list-group" ref="listGroup">
					<h2 class="list-group-title">{{group.title}}</h2>
					<ul>
						<li v-for="item in group.items" class="list-group-item" @click="selectItem(item)">
							<img v-lazy="item.imgUrl" class="avatar" alt="">
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
							<span class="name">{{item.name}}</span>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<div class="list-shortcut">
			<ul>
<<<<<<< HEAD
				<li v-for="(item,index) in shortCutList" @click='shortClick' :data-index="index" class="item">{{item}}</li>
			</ul>
		</div>
	</div>
</template> 
=======
				<li v-for="(item,index) in shortCutList" :data-index="index" class="item" @click="shortClick">{{item}}</li>
			</ul>
		</div>
	</div>
</template>
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a

<script>
	import BScroll from 'better-scroll'
	import { mapMutations } from 'vuex'
<<<<<<< HEAD
	export default{
=======

	export default {
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
		props:{
			data:{
				type:Array,
				default:[]
			}
		},
		mounted(){
			this._initScroll()
<<<<<<< HEAD
			// console.log(this.data)
		},
		methods:{
			_initScroll(){
=======
		},
		methods:{
			shortClick(e){
				var shortIndex = e.target.getAttribute("data-index")-0;
				this.scroll.scrollToElement(this.$refs.listGroup[shortIndex],500)
			},
			_initScroll(){
				if(!this.$refs.listview){
					return
				}
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
				this.scroll = new BScroll(this.$refs.listview,{
					click:true,
					probeType:1
				})
			},
<<<<<<< HEAD
			shortClick(e){
				let scrollIndex = e.target.getAttribute("data-index")-0;
				this.scroll.scrollToElement(this.$refs.listGroup[scrollIndex],1000);
			},
			selectItem(item){
				this.$router.push({
					path:'/singer/${item.id}'
				})
				this.setSinger(item)
				// console.log(item)
=======
			selectItem(item){
				this.$router.push({
					path:`/singer/${item.id}`
				})
				// 需要去将state的状态发生改变
				this.setSinger(item)
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
			},
			...mapMutations({
				setSinger:'SET_SINGER'
			})
<<<<<<< HEAD

		},
		computed:{
			shortCutList(){
				var aaa = this.data.map((item,index)=>{
					return item.title.slice(0,1)
				})
				return aaa;
=======
		},
		computed:{
			shortCutList(){
				return this.data.map((group)=>{
					return group.title.slice(0,1)
				})
>>>>>>> 2f2681559102dd200f119afb607054cf37b8104a
			}
		},
		watch:{
			data(){
				setTimeout(()=>{
					this.scroll.refresh()
				},20)
			}
		}
	}
</script>

<style scoped lang="less">
	@import "~assets/less/variable";

	.listview {
		position: relative;
	    width: 100%;
	    height: 100%;
	    overflow: hidden;
	    background: @color-background;
	    .list-group{
	       	padding-bottom: 30px;
		    .list-group-title{
		        height: 30px;
		        line-height: 30px;
		        padding-left: 20px;
		        font-size: @font-size-small;
		        color: @color-text-l;
		        background: @color-highlight-background;
		    }
		    .list-group-item{
		        display: flex;
		        align-items: center;
		        padding: 20px 0 0 30px;
		        .avatar{
		          	width: 50px;
		          	height: 50px;
		          	border-radius: 50%;
		        }
		        .name{
		          	margin-left: 20px;
		          	color: @color-text-l;
		          	font-size: @font-size-medium;
		        }
		    	
		    }
	    }
	    .list-shortcut{
		    position: absolute;
		    z-index: 30;
		    right: 0;
		    top: 50%;
		    transform: translateY(-50%);
		    width: 20px;
		    padding: 20px 0;
		    border-radius: 10px;
		    text-align: center;
		    background: @color-background-d;
		    font-family: Helvetica;
	      	.item{
	        	padding: 3px;
	        	line-height: 1;
	        	color: @color-text-l;
	        	font-size: @font-size-small;
	      	}	
	    } 	
	}
</style>